<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 响应式页面，主要针对手机显示
			width=device-width，页面宽度是设备宽度
			initial-scale=1 	初始化缩放大小，原来大小
			minimum-scale=1  	最小的缩放大小
			maximum-scale=1
			user-scalable=no 	是否允许用户缩放页面,no不允许,yes允许
		 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			/* 并集选择器 */
			html,
			body {
				margin: 0px;
				padding: 0px;
				height: 100%;
			}

			.container {
				background-image: url("../img/bg.jpg");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			/* form {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			} */

			input {
				background-color: transparent;
				/*transparent：透明*/
				border: none;
				outline: none;
				border-bottom: 1px solid black;
				color: white;

			}

			input:focus {
				border-bottom: 1px solid #eb4b7d;
			}

			.btn {
				width: 120px;
				height: 40px;
				background-color: transparent;
				outline: none;
				border: none;
			}

			.btn-login {
				background-image: url(../img/btn_login_p.png);
				background-size: 100% 100%;
			}

			.btn-login:hover {
				background-image: url(../img/btn_login_n.png);
			}

			.btn-logout {
				background-image: url(../img/btn_logout_p.png);
				background-size: 100% 100%;
			}

			.btn-logout:hover {
				background-image: url(../img/btn_logout_n.png);
			}

			input::-webkit-input-placeholder {
				/* WebKit browsers */
				color: white;
			}

			input:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: white;
			}

			input::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: white;
			}

			input:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<form style="text-align: center;">
				<div>
					<input type="text" placeholder="账号" />
				</div>
				<div>
					<input type="password" placeholder="密码" />
				</div>
				<div style="margin-top: 20px;">
					<button class="btn btn-login" type="button"></button>
					<button class="btn btn-logout" type="button"></button>
				</div>
			</form>
		</div>
	</body>
</html>
